<template>
	<div class="fixed flex">

		<div class="title flex">
			<div class="return">
				<img @click="prev" src="../assets/image/return.png" />
			</div>
			<div class="add">
				创建优惠
			</div>
			<div v-if="id" class="publish" @click="modify">
				提交修改
			</div>
			<div v-else class="publish" @click="onSubmit">
				提交审核
			</div>
		</div>
		<div id="create_group">
            
 			<el-form ref="form" :rules="rules" :model="form" class="demo-ruleForm create flex" :label-position="labelPosition" @submit.native.prevent>
				  <el-form-item label="拼券活动名称" prop="active_name" id="pice">
					<el-input v-model="form.active_name" style="width: 100%;" placeholder="请输入内容"></el-input>
				</el-form-item>
				
				<div class="model flex">
					<div class="left flex">
						<img src="../assets/image/biaozhiwei.png"/>
						优惠活动
					</div>
					<div class="right flex" @click="skip_select_model">
						<span v-if="models">{{models}} </span>
						<span v-else>{{model}} </span>
						<img src="../assets/image/selectmodel.png"/>
					</div>
				</div>

				
				<el-form-item label="使用日期" required id="data">
				
						<el-date-picker prop="date1" type="date" placeholder="开始日期" :picker-options="pickerOptionsStart" v-model="form.active_start_time" style="width: 4.6956rem;"></el-date-picker>
					
					<span style="color: #868E91;">&nbsp;—&nbsp;</span>
					
						<el-date-picker prop="date1" type="date" placeholder="结束日期" :picker-options="pickerOptionsEnd" v-model="form.active_end_time" style="width: 4.6956rem;"></el-date-picker>
					
				</el-form-item>
				<el-form-item prop="active_fa_num"  label="发放张数" id="type">
					<el-input v-model="form.active_fa_num"  style="width: 4.6956rem;"  placeholder="张数" ></el-input><span style="color: #868E91;font-size: 0.56522rem;">&nbsp;&nbsp;张</span>
				</el-form-item>
				
				<el-form-item prop="active_store_num"  label="参与商家" id="type">
					<el-input v-model="form.active_store_num"  style="width: 4.6956rem;"  placeholder="名额" ></el-input><span style="color: #868E91;font-size: 0.56522rem;">&nbsp;&nbsp;名</span>
				</el-form-item>
				
				<el-form-item  prop="active_require" label="使用说明" id="desc" >

					<el-input style="margin: auto;" type="textarea" v-model="form.active_require"  maxlength="500" onchange="this.value=this.value.substring(0, 500)" onkeydown="this.value=this.value.substring(0, 500)" onkeyup="this.value=this.value.substring(0, 500)" placeholder="500字以内" ></el-input>
				</el-form-item>
		
			<el-form-item label="活动介绍" id="desc">
					<el-input style="margin: auto;" type="textarea" v-model="form.active_describe" maxlength="500" onchange="this.value=this.value.substring(0, 500)" onkeydown="this.value=this.value.substring(0, 500)" onkeyup="this.value=this.value.substring(0, 500)"  placeholder="500字以内" ></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div class="mask">
		<div class="tip flex">
			<div class="tip_title flex">
				<div >
					
				</div>
				<div>
				确定退出此页面
				</div>
				<img  @click="quxiao" src="../assets/image/chahao.png"/>
				
			</div>
			
			<div class="tip_btn flex">
				<div class="queding"  @click="quxiao">
					取消
				</div>
					<div class="quxiao" @click="back" >确定</div>
				</div>

		</div>
	</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition: 'top',
				quan: "1",
				model:"请选择优惠模板",
				models:this.$route.query.model,
				id:this.$route.query.id,
				form: {
				active_store_id:localStorage.getItem("store_id"),
				active_name:"",
				active_coupons_id:this.$route.query.active_coupons_id,
				active_start_time:"",
				active_end_time:"",
				active_fa_num:"",
				active_store_num:"",
				active_require:"",
				active_describe:"",
				key:localStorage.getItem("key")
		
					
				},
				rules: {
					active_name: [{
							required: true,
							message: '请输入优惠名称',
							trigger: 'blur'
						}
					],
					active_require: [{
						required: true,
						message: '请填写使用说明',
						trigger: 'blur'
					}],
					
					
					active_store_num: [{
						required: true,
						message: '请填写参与商家',
						trigger: 'blur'
					}],
					condition: [{
						required: true,
						message: '请填写满足条件',
						trigger: 'blur'
					}],
					active_fa_num: [{
						required: true,
						message: '请填写张数',
						trigger: 'blur'
					}],
					limit:[{
						required: true,
						message: '请填写活动名称',
						trigger: 'blur'
					}]
				},
				pickerOptionsStart: {
					disabledDate: time => {
						let endDateVal = this.form.active_end_time;
						if(endDateVal) {
							return time.getTime() > new Date(endDateVal).getTime();
						}
					}
				},
				pickerOptionsEnd: {
					disabledDate: time => {
						let beginDateVal = this.form.active_start_time;
						if(beginDateVal) {
							return(time.getTime() < new Date(beginDateVal).getTime() + 3 * 24 * 60 * 60 * 1000);
						}
					}
				}

			}

		},

		methods: {
			onSubmit() {
             var that=this;
             	if(that.form.active_name){}else{
             		 this.$message.error('请输入拼券活动名称');
                     return;
             	}
             
             	if(that.form.active_coupons_id){}else{
             		 this.$message.error('请选择优惠模板');
                     return;
             	}
             	if(that.form.active_start_time){}else{
             		 this.$message.error('请选择开始时间');
                     return;
             	}
             	if(that.form.active_end_time){}else{
             		 this.$message.error('请选择结束时间');
                     return;
             	}
             	if(that.form.active_fa_num){}else{
             		 this.$message.error('请输入发放张数');
                     return;
             	}
             	if(that.form.active_store_num){}else{
             		 this.$message.error('请输入参与商家数量');
                     return;
             	}
             	if(that.form.active_store_num>=2){}else{
             		 this.$message.error('参与商家最少为2人');
                     return;
             	}
             	if(that.form.active_require){}else{
             		 this.$message.error('请填写使用说明');
                     return;
             	}
				var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/coupon/add_coupon", qs.stringify(that.form)).then(response => {
					 this.$message.success(response.data.message);
					this.$router.push({
						path: '/Coupon'
					});
					})
					.catch(error => {

					});
			},
			modify(){
				 var that=this;
				 
             	if(that.form.active_name){}else{
             		 this.$message.error('请输入拼券活动名称');
                     return;
             	}
             	
             	if(that.form.active_coupons_id){}else{
             		 this.$message.error('请选择优惠模板');
                     return;
             	}
             	if(that.form.active_start_time){}else{
             		 this.$message.error('请选择开始时间');
                     return;
             	}
             	if(that.form.active_end_time){}else{
             		 this.$message.error('请选择结束时间');
                     return;
             	}
             	if(that.form.active_fa_num){}else{
             		 this.$message.error('请输入发放张数');
                     return;
             	}
             	if(that.form.active_store_num){}else{
             		 this.$message.error('请输入参与商家数量');
                     return;
             	}
             	if(that.form.active_store_num>=2){}else{
             		 this.$message.error('参与商家最少为2人');
                     return;
             	}
             	if(that.form.active_require){}else{
             		 this.$message.error('请填写使用说明');
                     return;
             	}
				var qs = require('qs');
			that.$http.post(this.baseURL+"/index.php/waveguest/coupon/conunpon_edit", qs.stringify(that.form)).then(response => {
					if(response.data.status==200){
						 this.$message.success('修改成功');
						 this.$router.push({
						path: '/Coupon'
					});
						
					}else{
						this.$message.error(response.data.message);
					}
					})
					.catch(error => {

					});
			},
			back(){
				 this.$router.push({
						path: '/active'
					});
			},
			quxiao(){
				 $(".mask").css('display', 'none');
			},
			prev() {
//				
            $(".mask").css('display', 'block');
			},
			skip_select_model(){
				 this.$router.push({
						path: '/select_model'
					});
			},
			show(){
				
					var qs = require('qs');
			this.$http.post(this.baseURL+"/index.php/waveguest/coupon/counpon_edit_list", qs.stringify({
				"id":this.id,
				"key":localStorage.getItem("key")
				})).then(response => {
				console.log(response.data)
					this.form.active_coupons_id=response.data.data.active_coupons_id
					this.form.active_describe=response.data.data.active_describe
					this.form.active_end_time=response.data.data.active_end_time
					this.form.active_fa_num=response.data.data.active_fa_num
					this.form.active_id=response.data.data.active_id
					this.form.active_name=response.data.data.active_name
					this.form.active_require=response.data.data.active_require
					this.form.active_start_time=response.data.data.active_start_time
					this.form.active_store_id=response.data.data.active_store_id
					this.form.active_store_num=response.data.data.active_store_num
                    this.model=response.data.data.coupons_name
					})
					.catch(error => {

					});
			},
			
		},
		mounted() {
			 if(this.id){
			 	this.show()
			 }else{
			 	
			 }
		
		

		}
	}
</script>

<style>
	.el-message {
    min-width: 4rem;
    top: 40% !important;
}
	#create_group {
		
		background: white;
		border-radius: 0.5rem;
		margin: 2.5rem 0.5rem;
		-webkit-overflow-scrolling: touch;
	}
	
	.create {
		flex-wrap: wrap;
		justify-content: space-around;
	}
	
	.must {
		font-size: 0.5rem;
		border: 1px solid;
		float: left;
	}
	#data.el-form-item__label {
    width: 100% !important; 
}
	#desc {
		width: 90%;
	}
	
	#desc>.el-form-item__label {
		width: 100%;
		color: #868E91;
		font-size: 0.5217rem;
	}
	
	.el-textarea__inner {
		line-height: 3.5;
		background: #D1D5D8;
	}
	
	.el-input--suffix .el-input__inner {
		padding-right: 0px;
	}
	
	.el-col-2 {
		text-align: center;
	}
	
	#type {
		width: 40%;
	}
	
	#pice {
		width: 90%;
		color: #868E91;
		font-size: 0.5217rem;
	}
	
	#pice>.el-form-item__label {
		width: 100%;
		color: #868E91;
		font-size: 0.5217rem;
	}
	
	#type>.el-form-item__label {
		width: 100%;
		color: #868E91;
		font-size: 0.5217rem;
	}
	
	#type .el-input__inner {
		border-radius: 0.21739rem;
	}
	
	#data .el-form-item__label {
		width: 100%;
		color: #868E91;
		font-size: 0.5217rem;
	}
	
	#data {
		width: 90%;
	}
	
	#data .el-input__inner {
		border-radius: 0.21739rem;
	}
	
	.line {
		color: #868E91;
		text-align: center;
		font-size: 0.4rem;
	}
</style>
<style scoped="scoped">
	.mask {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		transition: all 0.2s ease-in;
		z-index: 99;
		display: none;
		
	}
	
	.tip{
	  position: fixed;
	  left: 50%;
	  top: 50%;
	  width: 13.78260rem;
	  height:6.69565rem;
	  margin-top: -3.3478rem;
	  margin-left: -6.89282rem;
	  background: white;
	  border-radius: 0.5rem;
	  flex-direction: column;
	}
	
	.tip_title{
		width:90%;
		padding: 5%;
		font-size: 0.7826rem;
		justify-content: space-between;
		line-height: 2rem;
		
	}
	
	.tip_title img{
		width:0.565212rem;
		height: 0.565212rem;
		
		
	}

	.tip_btn{
		font-size: 0.6087rem;
		justify-content: space-between;
	}
	.queding,.quxiao{
		width: 4.9782rem;
		height: 1.3043rem;
		text-align: center;
		margin-top: 1.6rem;
		color: #868E91;
		line-height: 1.3043rem;
		
	}
	.quxiao{
		color: white;
		background: #007AFF;
		border-radius: 10px;
		margin-right: 1rem;
	}
	.queding{
		margin-left: 1rem;
	}
	
	.fixed {
		background: #F5F6FA;
	}
	
	.title {
		height: 2rem;
		font-size: 0.73913rem;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		padding: 0 5%;
		background: white;
		font-weight: 400;
		position: fixed;
		top: 0;
		z-index:98;
	}
	
	.title>.return {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.title>.return>img {
		width: 0.67391rem;
		height: 0.67391rem;
	}
	
	.publish {
		color: #007AFF;
		font-size: 0.65217rem;
		font-weight: 400;
	}
	
	.el-message {
		min-width: 4rem;
		top: 40% !important;
	}
	.model{
		width: 90%;
		height: 2rem;
		font-size: 0.52173rem;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 0.5rem;
	}
	.model>.left>img{
		width: 0.2rem;
		height: 0.2rem;
		padding-right: 0.2rem;
		
	}
	.model>.right>img{
		width: 0.2rem;
		height: 0.4rem;
		padding-left: 0.3rem;
	}
	.model>.left,.model>.right{
		align-items: center;
		color: #868E91;
	}
	.model>.right{
		color: #D1D5D8;
	}
</style>